<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../plugins/layui/css/myPage.css">
</head>
<body style=" overflow-x:hidden;" >
<div class="layui-container">

    <form class=" layui-form">
       <div class="layui-row">
           <div class="layui-col-md12">
               <fieldset class="layui-elem-field " style="margin-top: 20px;">
                   <legend>客户详细信息</legend>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><span style="color: red;">*</span>客户简称</label>
                       <div class="layui-input-inline" style="width: 150px;">
                           <input   type="text" name="khjc"   lay-verify="required" placeholder="请输入"  class="layui-input"   >
                       </div>

                   </div>

                   <div class="layui-inline">
                       <label class="layui-form-label" style="width: 56px">助记码</label>
                       <div class="layui-input-inline" style="width: 150px;">
                           <input type="text" name="khzjm" autocomplete="off" class="layui-input"  >
                           <input type="hidden" lay-verify="" name="khid"  >
                       </div>
                   </div>

                        <div class="layui-inline">
                           <label class="layui-form-label" style="width: 82px">
                               </span>客户分类</label>
                           </label>
                           <div class="layui-input-inline" style="width: 150px;">
                               <select name="khfl" >
                                   <option value=""></option>
                                   <option value="托运方">托运方</option>
                                   <option value="收货方">收货方</option>
                               </select>
                           </div>
                        </div>
                        <div class="layui-inline">
                           <label class="layui-form-label" style="width: 60px">类别</label>
                           <div class="layui-input-inline" style="width: 150px;">
                               <select name="leibie" >
                                   <option value=""></option>
                                   <option value="大客户">大客户</option>
                                   <option value="零散客户">零散客户</option>
                               </select>
                           </div>
                        </div>

               </div>
               <div class="layui-form-item">

                   <label class="layui-form-label" >客户全称</label>
                   <div class="layui-input-inline" style="width: 420px;">
                       <input type="text" name="khqc"  id="khqc" lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
               </div>
                   <div class="layui-form-item">
                       <div class="layui-inline">
                           <label class="layui-form-label">客户联系人</label>
                           <div class="layui-input-inline" style="width: 150px;">
                               <input type="text" name="khlxr" autocomplete="off" class="layui-input">
                           </div>
                       </div>
                       <div class="layui-inline" >
                           <label class="layui-form-label" style="width: auto" >手机号码</label>
                           <div class="layui-input-inline"  style="width: 150px;" >
                               <input type="text" lay-verify="" name="khsjhm" autocomplete="off" class="layui-input">
                           </div>
                       </div>

                       <div class="layui-inline">
                           <label class="layui-form-label" style="width: 87px" >传真号码</label>
                           <div class="layui-input-inline" style="width: 150px;">
                               <input type="text" name="khczhm" autocomplete="off" class="layui-input">
                           </div>
                       </div>
                       <div class="layui-inline">
                       <label class="layui-form-label"  style="width: 58px" >联系电话</label>
                       <div class="layui-input-inline" style="width: 150px;">
                           <input type="text" lay-verify="" name="khlxdh" autocomplete="off" class="layui-input">
                        </div>
                   </div>

                   <div class="layui-form-item">
                   <label class="layui-form-label" > 联系地址</label>
                   <div class="layui-input-inline" style="width: 420px;">
                       <input type="text" name="lxdz"   lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>



                   <label class="layui-form-label" >税号</label>
                   <div class="layui-input-inline" style="width: 420px;">
                       <input type="text" name="shuihao"   lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
                   </div>

                   <div class="layui-form-item">
                   <label class="layui-form-label" >开户银行</label>
                   <div class="layui-input-inline" style="width: 420px;">
                       <input type="text" name="khyh"   lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>

                   <label class="layui-form-label" >银行账号</label>
                   <div class="layui-input-inline" style="width: 420px;">
                       <input type="text" name="yhzh"   lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>
                   </div>

                   <div class="layui-form-item">
                   <label class="layui-form-label" >备注</label>
                   <div class="layui-input-inline" style="width: 420px;">
                       <input   name="sfcz"   type="hidden" value="1">
                       <input   name="khid"   type="hidden" id="khid">
                       <input type="text" name="beizhu"   lay-verify="" placeholder="请输入" autocomplete="off" class="layui-input">
                   </div>


                   </div>

                   </div>
               </fieldset>
           </div>
       </div>

        <button type="button" class="layui-btn layui-btn-normal"  id="modiInfo" style="width: 10%; position: absolute;left: 55%" >修改信息</button>
        <button id="modiSub" class="layui-btn layui-btn-normal layui-btn-disabled" disabled lay-submit lay-filter="update" style="width: 10%; position: absolute;left: 35%"  >立即提交</button>
    </form>
</div>
<script src="../plugins/layui/layui.js"></script>
<script src="../js/config.js"></script>
<script src="../js/tools.js"></script>
<script>
    layui.use(['table','form','element' ],function () {

        var table = layui.table;
        var $ = layui.$;
        var element = layer.element;
        var form = layui.form;
        var areaInfo;


        $(".layui-input").addClass("layui-disabled");
        $(".layui-input").attr("disabled",true);
        $("select").attr("disabled","disabled");

        $("#modiInfo").on('click',function(){
            $(".layui-input").removeClass("layui-disabled");
            $(".layui-input").attr("disabled",false);
            $("#modiSub").removeClass("layui-btn-disabled");
            $("#modiSub").removeAttr("disabled");
            $("#addAreaInfo").removeClass("layui-btn-disabled");
            $("#addAreaInfo").removeAttr("disabled");
            $("#modiInfo").addClass("layui-btn-disabled");
            $("#modiInfo").attr("disabled",true);
            $("#ckwj").removeClass("layui-btn-disabled");
            $("#ckwj").attr("disabled",false);
            $("#scwj").removeClass("layui-btn-disabled");
            $("#scwj").attr("disabled",false);
            $("select").removeAttr("disabled");
            form.render('select');
        });


        $("#scwj").on('click',function () {
            layer.open({
                type: 2,
                title: '新增客户文件信息',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['700px' , '550px'],
                content: './uploadCusFiles.html',
                success:function(layero,index){
                    var body = layer.getChildFrame('body',index);
                    body.contents().find("[name='khid']").val($("#khid").val());
                },
                end:function(){

                }
            });
        })

        $("#ckwj").on('click',function () {
            layer.open({
                type: 2,
                title: '查看客户文件信息',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['700px' , '550px'],
                content: './lookCusFiles.html',
                success:function(layero,index){
                    var body = layer.getChildFrame('body',index);
                    body.contents().find("[name='khid']").val($("#khid").val());
                },
                end:function(){

                }
            });
        })



        $.ajax({
            url: contextPath+"/area/"+$("#khid").val(),
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {
                areaInfo = res.list;
                table.render({
                    elem:'#areaInfo'
                    ,page:true
                    ,limit:10
                    ,height:'full-185'
                    ,cellMinWidth: 80
                    ,data: res.list
                    ,cols: [[
                        { type:'numbers', title: '序号',  align:'center'  }
                        ,{field:'qymc', title: '区域名称' ,align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        ,{field:'zjm', title: '助记码', align: 'center' } //单元格内容水平居中
                        ,{field:'lxr', title: '联系人',   align: 'center' } //单元格内容水平居中
                        ,{field:'lxfs', title: '联系方式',   align: 'center' }
                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' ,width:150}

                    ]]
                });
            }
        });



        $("#addAreaInfo").on('click',function(){
            if($("#addAreaInfo").hasClass("layui-btn-disabled")){}else {
                $("input").css("border","");
                if($("#qymc").val()||$("#zjm").val()||$("#lxr").val()||$("#lxfs").val()){
                    var content = {
                        "qymc":$("#qymc").val(),
                        "zjm":$("#zjm").val(),
                        "lxr":$("#lxr").val(),
                        "lxfs":$("#lxfs").val(),
                        "khid":$("#khid").val(),
                        "sfcz":$("#sfcz").val(),
                        // "qynum":
                    };
                    areaInfo.push(content);
                                    table.render({
                                        elem:'#areaInfo'
                                        ,page:true
                                        ,limit:10
                                        ,height:'full-185'
                                        ,cellMinWidth: 80
                                        ,data: areaInfo
                                        ,cols: [[
                                            { type:'numbers', title: '序号',  align:'center'  }
                                            ,{field:'qymc', title: '区域名称' ,align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                                            ,{field:'zjm', title: '区域助记码', align: 'center' } //单元格内容水平居中
                                            ,{field:'lxr', title: '区域联系人',   align: 'center' } //单元格内容水平居中
                                            ,{field:'lxfs', title: '联系人电话',   align: 'center' }
                                            ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' ,width:150}

                                        ]]
                                    });
                }else {
                    layer.msg("客户区域信息不能为空！");
                    return;
                }

                // $.ajax({
                //     url: contextPath+"/area",
                //     type: "POST",
                //     contentType:"application/json;charset=utf-8",
                //     data: JSON.stringify(content) ,
                //     dataType:"json",
                //     success: function(res) {
                //         areaInfo = res.list;
                //         newSuccessNoClose($,layer,res);
                //
                //         $.ajax({
                //             url: contextPath+"/area/"+$("#khid").val(),
                //             type: "GET",
                //             contentType:"application/json;charset=utf-8",
                //             dataType:"json",
                //             success: function(res) {
                //
                //                 table.render({
                //                     elem:'#areaInfo'
                //                     ,page:true
                //                     ,limit:10
                //                     ,height:'full-185'
                //                     ,cellMinWidth: 80
                //                     ,data: res.list
                //                     ,cols: [[
                //                         { type:'numbers', title: '序号',  align:'center'  }
                //                         ,{field:'qymc', title: '区域名称' ,align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                //                         ,{field:'zjm', title: '区域助记码', align: 'center' } //单元格内容水平居中
                //                         ,{field:'lxr', title: '区域联系人',   align: 'center' } //单元格内容水平居中
                //                         ,{field:'lxfs', title: '联系人电话',   align: 'center' }
                //                         ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' ,width:150}
                //
                //                     ]]
                //                 });
                //             }
                //         });
                //
                //
                //     }
                // });
            }


        });

        //监听工具条
        table.on('tool(areaInfo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'up'){
                    $.ajax({
                        url: contextPath+"/area/up/"+$("#khid").val()+"/"+data.qyid,
                        type: "PUT",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        success: function(res) {
                            layer.msg(res.message);
                            $.ajax({
                                url: contextPath+"/area/"+$("#khid").val(),
                                type: "GET",
                                contentType:"application/json;charset=utf-8",
                                dataType:"json",
                                success: function(res) {
                                    table.render({
                                        elem:'#areaInfo'
                                        ,page:true
                                        ,cellMinWidth: 80
                                        ,data: res.list
                                        ,cols: [[
                                            { type:'numbers', title: '序号',  align:'center'  }
                                            ,{field:'qymc', title: '区域名称' ,align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                                            ,{field:'zjm', title: '助记码', align: 'center' } //单元格内容水平居中
                                            ,{field:'lxr', title: '联系人',   align: 'center' } //单元格内容水平居中
                                            ,{field:'lxfs', title: '联系方式',   align: 'center' }
                                            ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' ,width:150}

                                        ]]
                                    });
                                }
                            });
                        }
                    });
            } else if(layEvent === 'del'){
                console.log(data);
                layer.confirm('确定删除?', function(index){
                    $.ajax({
                        url: contextPath+"/area/"+data.qyid,
                        type: "DELETE",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        success: function(res) {
                            obj.del(); //删除对应行（tr）的DOM结构
                            layer.msg(res.message);
                        }
                    });

                    layer.close(index);
                    //向服务端发送删除指令
                });
            }else if(layEvent === "down"){
                $.ajax({
                    url: contextPath+"/area/down/"+$("#khid").val()+"/"+data.qyid,
                    type: "PUT",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        layer.msg(res.message);
                        $.ajax({
                            url: contextPath+"/area/"+$("#khid").val(),
                            type: "GET",
                            contentType:"application/json;charset=utf-8",
                            dataType:"json",
                            success: function(res) {
                                table.render({
                                    elem:'#areaInfo'
                                    ,page:true
                                    ,cellMinWidth: 80
                                    ,data: res.list
                                    ,cols: [[
                                        { type:'numbers', title: '序号',  align:'center'  }
                                        ,{field:'qymc', title: '区域名称' ,align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                                        ,{field:'zjm', title: '助记码', align: 'center' } //单元格内容水平居中
                                        ,{field:'lxr', title: '联系人',   align: 'center' } //单元格内容水平居中
                                        ,{field:'lxfs', title: '联系方式',   align: 'center' }
                                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' ,width:150}

                                    ]]
                                });
                            }
                        });
                    }
                });
            }
        });
        form.on('submit(update)', function(data){
            $("input").css("border","");

            $.ajax({
                url: contextPath+"/cstmr/",
                type: "PUT",
                contentType:"application/json;charset=utf-8",
                data: JSON.stringify(data.field) ,
                dataType:"json",
                success: function(res) {
                    console.log(res);
                    updateSuccess($,layer,res)
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

</script>
</body>
</html>